<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='用户编辑',active='user'">
<header th:replace="back/header::headerFragment(${title},${active})"></header>
<head>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

    <!-- 引入jQuery库 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- 引入Bootstrap JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<!-- 模态框 -->
<div class="modal-header">
    <h5 class="modal-title" id="editUserModalLabel">编辑用户信息</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <form  id="editForm"  th:object="${user}">
        <div class="form-group">
            <input type="hidden"  id="id" name="id" th:field="*{id}" required>
        </div>
        <div class="form-group">
            <label for="name">姓名：</label>
            <input type="text" class="form-control" id="name" name="username" th:field="*{username}" required>
        </div>
        <div class="form-group">
            <label for="sex">性别：</label>
            <select class="form-control" id="sex" name="sex" th:field="*{sex}" required>
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div class="form-group">
            <label for="tel">电话：</label>
            <input type="text" class="form-control" id="tel" name="tel" th:field="*{tel}" required>
        </div>
        <div class="form-group">
            <label for="password">密码：</label>
            <input type="text" class="form-control" id="password" name="password" th:field="*{password}"  >
        </div>
        <button type="submit" class="btn btn-primary" id="saveBtn" >保存</button>
    </form>
</div>
<script>

    // 假设用户点击保存按钮时触发保存操作
    document.getElementById('saveBtn').addEventListener('click', function(event) {
        event.preventDefault(); // 阻止表单默认提交行为

        var user ={
            id:parseInt($("#id").val()),
            username:$("#name").val(),
            sex:$("#sex").val(),
            tel:$("#tel").val(),
            password:$("#password").val()

        }
        console.log(user)
        // 发送保存请求
        $.ajax({
            url: "/admin/user/saveUser",
            type: "GET",
            data: user,
            contentType: "application/json",
            success: function(response) {
                console.log("User information saved successfully.");
                // 进行保存成功后的操作，例如刷新页面或显示成功提示
                $("#editModal").modal("hide");
                location.reload();
            },
            error: function(xhr, status, error) {
                console.error("Failed to save user information:", error);
                // 处理保存失败的情况，例如显示错误提示
            }
        });
    });


</script>
</html>




